<template>
    <div>
        <h1>我是Ygr组件</h1>
        <table border="1">
            <thead>
                <tr>
                    <th>图书id</th>
                    <th>图书名</th>
                    <th>图书类别</th>
                    <th>图书价格</th>
                    <th>库存</th>
                    <th>已售</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in datas" :key="item.goodsId">
                    <td>{{item.goodsId}}</td>
                    <td>{{item.goodsName}}</td>
                    <td>{{item.goodsType}}</td>
                    <td>{{item.goodsPrice}}</td>
                    <td>{{item.goodsCount}}</td>
                    <td>{{item.goodsSell}}</td>
                    <td><button>删除</button></td>
                </tr>
            </tbody>
        </table>
        <div>
            <span ref='pre' @click='pageClick'>上一页</span>
            <span v-for="count in maxPage" :key='count' :ref='p' @click='pageClick'>{{count}}</span>
            <span ref='next' @click='pageClick'>下一页</span>
        </div>
    </div>
</template>
<script>
import axios from 'axios'
import * as url from '../api/ygrapi.js'
export default {
    name: "index",
    data() {
        return {
            datas: [],
            maxPage: 1,
            now:1,
            p:'p'
        }
    },
    methods: {
        getList() {
            axios({
                url: url.YGR_PATH,
                method: 'get',
            }).then(res => {
                this.datas=res.data.filter((item,index)=>{
                    return index<this.now*4&&index>=(this.now-1)*4
                });
                 console.log(this.datas);
                this.maxPage = Math.ceil(res.data.length / 4)
            }).catch(err => {
                console.log(err)
            })
        },
        pageClick(e) {
            let current=e.target.innerText;
            if (current=='上一页') {
                if (this.now>1) {
                    this.now--;
                    this.getList()
                }
            }else if(current=='下一页'){
                if (this.now<this.maxPage) {
                    this.now++;
                    this.getList()
                }
            }else {
                this.now=parseInt(current)
                this.getList()
                console.log(this.now)
            }
        }

    },
    created() {
        this.getList()
        // this.$nextTick(function() {
        //        this.pageClick();
        //    })
        
    }
}
</script>
<style scoped>
span {
    display: inline-block;
    padding: 5px 10px;
    border:1px solid grey;
    cursor: pointer;
}
</style>
